<template>
  <el-descriptions
    :title="data?.taskName + '采集器'"
    :border="true"
    :column="2"
  >
    <el-descriptions-item label="采集器名称" >
      <div>{{ data?.taskName }}</div>
    </el-descriptions-item>

    <el-descriptions-item label="采集器类型">
      <template #default>
        <div>
          <el-tag
            :style="{ marginRight: '6px' }"
            type="success"
            v-if="data?.taskType == 1"
            >MQTT</el-tag
          >
          <el-tag
            :style="{ marginRight: '6px' }"
            type="success"
            v-if="data?.taskType == 2"
            >扫描文件</el-tag
          >
          <el-tag
            :style="{ marginRight: '6px' }"
            type="success"
            v-if="data?.taskType == 3"
            >TCP-server</el-tag
          >
          <el-tag
            :style="{ marginRight: '6px' }"
            type="success"
            v-if="data?.taskType == 4"
            >TCP-client</el-tag
          >
          <el-tag
            :style="{ marginRight: '6px' }"
            type="success"
            v-if="data?.taskType == 5"
            >CDM采集</el-tag
          >
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="扫描间隔">
      <template #default>
        <div>{{ data?.taskFreqCorn }}</div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item label="状态">
      <template #default>
        <el-tag
          :style="{ marginRight: '6px' }"
          v-if="data?.taskStatus"
          type="success"
          >开启</el-tag
        >
        <el-tag :style="{ marginRight: '6px' }" v-else type="info">关闭</el-tag>
      </template>
    </el-descriptions-item>

    <el-descriptions-item label="其他信息">
      <template #default>
        <div>
          {{ data?.taskOtherInfo ?? "无" }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="扫描文件路径">
      <template #default>
        <div>
          {{ data?.collectFilePath ?? "无" }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="下次读取行数">
      <template #default>
        <div>
          {{ data?.collectReadLine }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item label="组名">
      <template #default>
        <div>
          {{ groupList?.find((v) => v.id == data.taskGroupId)?.taskGroupName   }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item   label="采集器监听端口">
      <template #default>
        <div>
          {{ data?.listenerPort }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="采集器十六进制字符串">
      <template #default>
        <div>
          {{ data?.hexOrderString }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item label="转发地址" v-if="data?.taskType == 4 || data?.taskType == 3" >
      <template #default>
        <div>
          {{ data?.tarTcpUrl }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="缓存大小">
      <template #default>
        <div>
          {{ data?.taskBufferSize }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="clientId">
      <template #default>
        <div>
          {{ data?.clientId }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="mqttUrl">
      <template #default>
        <div>
          {{ data?.mqttUrl }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="用户名">
      <template #default>
        <div>
          {{ data?.userName }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="密码">
      <template #default>
        <div>
          {{data.password}}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="topic">
      <template #default>
        <div>
          {{ data?.topic }}
        </div>
      </template>
    </el-descriptions-item>

    <el-descriptions-item  label="qos">
      <template #default>
        <div v-if="data?.qos == 0">QoS0</div>
        <div v-else-if="data?.qos == 1">QoS1</div>
        <div v-else-if="data?.qos == 2">QoS2</div>
      </template>
    </el-descriptions-item>


    <el-descriptions-item label="创建时间">
      {{ data?.createdAt }}
    </el-descriptions-item>
    <el-descriptions-item label="更新时间">
      {{ data?.updatedAt }}
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      {{ data?.remark ?? "无" }}
    </el-descriptions-item>
  </el-descriptions>

  <div style="display: flex; flex-direction: column">
        <h4> 基准值 </h4>
        <v-ace-editor
          style="width: 100%; height: 20vh; font-size: 16px; border: 1px solid"
          v-model:value="json"
          lang="json"
          theme="monokai"
          :options="options"
        />
    </div>
</template>

<script setup lang="ts">
import { GetGroupListApi } from "@/api/group";
import type { CollectTask,  GroupList } from "@/model/group";
import { options } from "@/utils/options";
import { ref, watch } from "vue";
import { VAceEditor } from "vue3-ace-editor";
const { data } = defineProps<{
  data: CollectTask;
}>();


const groupList = ref<GroupList>([]);
getGroupList();
/** 获取组列表方法 */
async function getGroupList() {
   const { data: { list } } =   await GetGroupListApi()
   groupList.value = list;
}
watch(() => data, () => {
   json.value = JSON.stringify(data.collectBaseValuesJson, (key, value) => {
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }

  
  }, 2)
})


const json = ref("")

</script>

<style scoped></style>
